<template>
    <van-nav-bar title="歌单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!--歌手界面-->
    <div class="singerhead" v-if="sheettype == 'singershow'">
        <img :src='singernews.picUrl'  class="singerimg"> 
        <div class="card">
            <div class="singername">{{ singernews.name }}</div>
        </div>
    </div>
    <!--普通歌单界面-->
     <div class='sheetinformation' v-if="sheettype =='commonsheet'">
        <img :src="detail.coverImgUrl"  class="img" >
        <div :style="{ flex: 1, marginLeft: '16px' }">
            <span>{{ detail.name }}</span>
        </div>
    </div>
    <!--每日推荐界面-->
    <div class='backdaysimg' v-if="sheettype =='daysrecommend'" >
        <span>每日推荐</span>
    </div>

    <!-- 共享 -->
    <div class="playline">
        <van-icon name="play-circle" color="#DD001B" />
        <span class="playword">播放全部<span class="playnumber">({{ songdetail.length }})</span></span>
    </div>
    <div v-for=" (item, index) in songdetail" class="songline" @click="goplay(item.id)" :key="index">
        <img :src="item.al.picUrl" class="alimg" v-if="sheettype =='daysrecommend'">
        <span class="number"  v-if="sheettype !=='daysrecommend'">{{ index + 1 }}</span>
        <div>
            <div>{{ item.name }}</div>
            <div class="authorship">{{ item.ar[0].name }} - {{ item.al.name }}</div>
        </div>
        <van-icon class="icon" name="ellipsis" />
    </div> 
</template>

<script setup>

import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { sheetdetail, sheetsong, songurl } from '../../api/music_style'
import { singertopsongApi } from '../../api/singer';
import { dayrecommend  } from '../../api/recommend';
import store from '../../store';

const route = useRoute()
const router = useRouter()
const onClickLeft = () => history.back();
let songdetail = ref([])
let sheettype = ref('commonsheet')
let singernews = ref('')
let detail = ref({
    name: '每日推荐',
    coverImgUrl: '',
    description: ''
})
onMounted(() => {
    if(route.query.ids){
        getsheetdetail()
    }else if(route.query.detail){
        singernews.value = JSON.parse(route.query.detail)
        gettopsong(singernews.value.id)

        sheettype.value = 'singershow'
    }
    else{
        dayrecommendsong()
        sheettype.value = 'daysrecommend'
    }
})
const dayrecommendsong = async()=>{
    let data =  await dayrecommend()
    songdetail.value = data.data.dailySongs
}
const getsheetdetail = async () => {
    let data = await sheetdetail(route.query.ids)
    detail.value = data.playlist
    getsheetsong(route.query.ids)
}
const getsheetsong = async (id) => {
    let data = await sheetsong(id)
    songdetail.value = data.songs
    // let songdata = await songdetail()
}
const gettopsong =async(id)=>{
   let data =  await singertopsongApi(id)
    songdetail.value = data.songs
}
const goplay = (id) => {
    store.state.playlist = songdetail.value
    
    router.push({
        path: '/songplay',
    })
    store.state.nowplay.id = id
}
</script>
 
<style scoped lang="less">
.singername{
    font-size: 20px;
    font-weight:bold ;
    margin: 10px 0;
}
.singerhead{
    position: relative;
    height: 400px;
}
.card{
    border-radius: 10px;
    border: 1px solid #e4e7ed;
    background-color: white;
    margin: 20px 0;
    width: 80%;
    height: 100px;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    text-align: center;

}
.playline{
    background-color: white;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    .playword{
        font-weight: bold;
        font-size: 18px;
    }
    .playnumber{
        font-size: 10px;
        color: #AAAAAA;
        margin: 10px;
    }
}
.img{
    width: 150px;
    height: 150px;
    border-radius:10px ;
}
.singerimg{
    width: 100%;
}
.songline {
    position: relative;
    height: 60px;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
}

.icon {
    position: absolute;
    right: 10%;
}

.authorship {
    font-size: 10px;
    color: #9A9A9A;
    opacity: 0.8;
}

.number {

    margin: 0 20px;
    color: #8d969b;
}

.sheetinformation {
    display: flex;
    width: '100%';
    height: 200px;
    align-items: center;
    background-color: #35363A;
    color: #ECE8E5;
    padding: 10px;
    margin-bottom: 10px;
}
.alimg{
    width: 50px;
    height: 50px;
    margin: 10px;
}
.backdaysimg{
   background-image: url(../../assets/daysimg.png);
   width: 100%;
   height: 200px;

   font-size: 35px;
   text-align: center;
   line-height: 200px;
   color:#fff;

}
</style>